<template>
  <!-- 员工实名认证审核 -->
  <div class="product">
    <!-- 头部区域 -->
    <div class="header">
      <!-- 时间 -->

      <el-date-picker
        v-model="value"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right"
      />
      <!-- 状态下拉框 -->
      <el-select v-model="userStatus" clearable placeholder="请选择状态">
        <el-option label="通过" value="通过" />
        <el-option label="不通过" value="不通过" />
        <el-option label="未审核" value="未审核" />
      </el-select>
      <!-- 编号 -->
      <el-input v-model="userId" style="width: 240px" placeholder="申请人编号" clearable />
      <!-- 查询按钮 -->
      <el-button type="primary" @click="queryCertification">查询</el-button>
    </div>
    <!-- 表格内容展示区 -->
    <div class="table_content">
      <!-- :data 整个表格的数据源 -->
      <el-table :data="applyData" style="width: 100%">
        <!-- 序号 -->
        <el-table-column type="index" label="序号" align="center" />
        <!-- 产品编号 -->
        <el-table-column prop="userId" label="申请人编号" align="center" />
        <el-table-column prop="realname" label="姓名" align="center" />
        <el-table-column label="申请时间" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.applyTime | fmtDate }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="idCard" label="身份证号" align="center" />
        <!-- 名称 -->
        <el-table-column label="身份证正面" align="center">
          <!-- 作用域插槽 -->
          <template slot-scope="scope">
            <el-image
              style="width: 40px; height: 40px"
              :src="scope.row.idcardPhotoPositive"
              :preview-src-list="[scope.row.idcardPhotoPositive]"
            />
          </template>
        </el-table-column>
        <!-- 图片 -->
        <el-table-column label="身份证反面" align="center">
          <!-- 作用域插槽 -->
          <template slot-scope="scope">
            <el-image
              style="width: 40px; height: 40px"
              :src="scope.row.idcardPhotoNegative"
              :preview-src-list="[scope.row.idcardPhotoNegative]"
            />
          </template>
        </el-table-column>
        <!-- 价格 -->
        <el-table-column prop="bankCard" label="银行卡号" align="center" />
        <!-- 状态 -->
        <el-table-column label="银行卡" align="center">
          <template slot-scope="scope">
            <el-image
              style="width: 40px; height: 40px"
              :src="scope.row.bankCardPhoto"
              :preview-src-list="[scope.row.bankCardPhoto]"
            />
          </template>
        </el-table-column>

        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <div class="name-wrapper">
              <el-tag v-if="scope.row.status == '通过'" size="medium">
                {{
                scope.row.status
                }}
              </el-tag>
              <el-tag
                v-else-if="scope.row.status == '不通过'"
                size="medium"
                style="
                  background-color: #fcebea;
                  border-color: #fab6b2;
                  color: #f94f45;
                "
              >{{ scope.row.status }}</el-tag>
              <el-tag
                v-else
                size="medium"
                style="
                  background-color: #F2EFEF;
                  border-color: #C3C0C0;
                  color: #ADA9A9;
                "
              >{{ scope.row.status }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.status=='未审核'">
              <el-button style="color: red" type="text" size="small" @click="open(scope.row.id)">删除</el-button>
              <el-button
                style="color: blue"
                type="text"
                size="small"
                @click="checkPass(scope.row.id)"
              >通过</el-button>
              <el-button
                style="color: grey"
                type="text"
                size="small"
                @click="checkNoPass(scope.row.id)"
              >不通过</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 底部分页区域 -->
    <div class="paginetion">
      <!-- 分页组件 -->
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
// 引入axios
import { get } from '@/utils/request'
import moment from 'moment'
export default {
  // 局部注册
  filters: {
    fmtDate(date) {
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
      // 或者return⾃⼰编写的时间处理函数
    }
  },
  data() {
    return {
      userId: '',
      applyData: [],
      userStatus: '',
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      value: [],
      // 当前的页码
      currentPage: 1,
      // 每页要展示的数据条数
      pageSize: 8,
      // 页面展示数据的总条数
      total: 10,
      // 定一个查询的参数
      queryData: {}
    }
  },
  computed: {},
  created() {
    this.getAllApplyData()
  },
  mounted() { },
  methods: {
    open(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteCertification(id)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    async deleteCertification(id) {
      const res = await get('/certification/revokeCertificationApply', { id })
      // 给用户一个成功或失败的提示
      if (res.status === 200) {
        this.$message({
          message: res.message,
          type: 'success'
        })
        // 重新刷新页面的数据
        this.getAllApplyData()
      } else {
        this.$message.error(res.message)
      }
    },
    async checkPass(id) {
      // 发送上架请求
      const res = await get('/certification/checkPass', { id })
      // 给用户一个成功或失败的提示
      if (res.status === 200) {
        this.$message({
          message: res.message,
          type: 'success'
        })
        // 重新刷新页面的数据
        this.getAllApplyData()
      } else {
        this.$message.error(res.message)
      }
    },
    async checkNoPass(id) {
      // 发送上架请求
      const res = await get('/certification/checkNoPass', { id })
      // 给用户一个成功或失败的提示
      if (res.status === 200) {
        this.$message({
          message: res.message,
          type: 'success'
        })
        // 重新刷新页面的数据
        this.getAllApplyData()
      } else {
        this.$message.error(res.message)
      }
    },
    queryCertification() {
      // 定义参数
      const data = {
        // 产品名称
        userId: this.userId,
        // 产品状态
        status: this.userStatus,
        // 栏目的id
        beginTime: Date.parse(this.value[0]),
        endTime: Date.parse(this.value[1])
      }
      // 格式化参数 当某个属性没有值的时候 将其删除掉 以防影响网络请求的操作
      for (const key in data) {
        if (!data[key]) {
          delete data[key]
        }
      }
      // 将参数 赋值给 queryData
      this.queryData = data
      // 将页数强制回到第一页
      this.currentPage = 1
      // 重新加载产品数据
      this.getAllApplyData()
    },
    async getAllApplyData() {
      // 获取参数
      const data = {
        page: this.currentPage,
        pageSize: this.pageSize
      }
      // queryData 和 data 结合成一个对象呢？
      // console.log({...data, ...this.queryData});
      // 通过对应的参数发送网络请求 获取产品数组数据
      const res = await get('/certification/pageQueryCertificationApply', {
        ...data,
        ...this.queryData
      })
      console.log(res.data.list)
      // 将data中的产品数组 进行赋值
      this.applyData = res.data.list
      // 页面总数据条数 赋值
      this.total = res.data.total
    },
    /**
     * @description: 控制每页数据条数
     * @param {*} val 每页要展示的数据条数
     * @return {*}
     * @author: ZachGmy
     */
    handleSizeChange(val) {
      // 将每页要展示的数据的条数 进行一个更新
      this.pageSize = val
      // 将当前的页数 重置到第一页
      this.currentPage = 1
      // 重新调用获取所有产品数据的方法
      this.getAllApplyData()
    },
    /**
     * @description: 控制当前显示的页数
     * @param {*} val 当前的页码
     * @return {*}
     * @author: ZachGmy
     */
    handleCurrentChange(val) {
      // 将当前页数 与 分页插件动态点击控制的页数相绑定
      this.currentPage = val
      // 重新调用获取所有产品数据的方法
      this.getAllApplyData()
    }
  }
}
</script>
<style scoped>
.paginetion {
  position: fixed;
  bottom: 40px;
  right: 10px;
}
</style>
